const { src, dest, parallel, series, watch } = require('gulp');
const sass = require('gulp-sass');
const connect = require('gulp-connect');
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var pxtoviewport = require('postcss-px-to-viewport');
function webdev() {
  connect.server({
    livereload: true,
  });
}

function css() {

  var processors = pxtoviewport({
    viewportWidth: 375,
    viewportHeight: 667,
    viewportUnit: 'vw',
    propList: ['*'],
    mediaQuery: true,
    replace: true
  });

  return src('assets/css/*.scss')
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
    .pipe(postcss([autoprefixer, processors]))
    .pipe(dest('assets/css'))
    .pipe(connect.reload());
}

function html() {
  return src(['*.html', 'assets/js/*.js', "assets/css/*.css"])
    .pipe(connect.reload())
}

function watchDir() {
  watch('assets/css/*.scss', css);
  watch(['*.html', 'assets/js/*.js', "assets/css/*.css"], html);
}

exports.default = parallel(webdev, css, watchDir)
